<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>easylife</title>
	
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
	<link media="all" href="/easylife/Public/Home/css/frozen.css?v=201501248042" rel="stylesheet">
	<!-- <link media="all" href="/easylife/Public/Home/css/ratchet.css?v=201501248042" rel="stylesheet"> -->
	
	<style type="text/css">	
		.content{
			background: red;
			width: 300px;
			height: 300px;
			margin: 0 auto;
		}
		.delete{
			width:60px;
			height: 64px;
			background-color: red;
			position: relative;
			right: 0;
			top: -64px;
			float: right;
			color: white;
			font-size: 18px;
			text-align: center;
			line-height: 64px;
			z-index: 1;
		}
		.ui-list{
			position:relative;
			left:0;
			z-index: 2;
			/*float: left;*/
		}
		
	</style>

</head>
<body>

	<div class="contnet">
		<div class="list">
			<ul class="ui-list ui-border-b" id="ui-list1">
				<li>
					<div class="ui-avatar">
						<span style="background-image:url(http://placehold.sinaapp.com/?100*100)"></span>
					</div>
					<div class="ui-list-info ui-border-t">
						<h4>100*100头像</h4>
						<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
					</div>
				</li>
			</ul>
			<div class="delete" id="delete1">删除</div>
		</div>
		<div class="list">
			<ul class="ui-list ui-border-b" id="ui-list2">
				<li>
					<div class="ui-avatar">
						<span style="background-image:url(http://placehold.sinaapp.com/?100*100)"></span>
					</div>
					<div class="ui-list-info ui-border-t">
						<h4>100*100头像</h4>
						<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
					</div>
				</li>
			</ul>
			<div class="delete" id="delete2">删除</div>
		</div>
	</div>

<script src="/easylife/Public/Home/js/zepto.min.js"></script>
<script src="/easylife/Public/Home/js/frozen.js"></script>

		
	<script type="text/javascript">
	var test = document.getElementById("ui-list1");
	var lastid = document.getElementById("ui-list1");
	// test.style.left = 0;
	istouch = false;
		$(function(){
		    $('.ui-list').bind("touchstart",function(e){
		       var ev = e || window.event;
		       
		       if(istouch && left == -60){
		       	// alert(left);
		       		// bx = this.getBoundingClientRect().left;
		       		timer = setInterval(function(){
		    		  left = left + 3;
			          test.style.left = left + "px";
			          console.log(test.style.left);

			          console.log(left+"--bx");
			          if(left>0)left = 0;
			          if(left == 0){
			          	clearInterval(timer);
			          	istouch = false;
			          }
			        },1);
			        move = false;
			        return ;
		       }
		      	test = document.getElementById(this.id);
		        // var cx = ev.clientX;
		        cx = ev.changedTouches[0].clientX;
		        //sx = parseInt(this.style.left);
		        sx = this.getBoundingClientRect().left;
		        leftx = cx - sx;
		        console.log(leftx);
		        console.log(cx);
		        console.log(sx);

		        move = true;

		       // console.log(this.getBoundingClientRect().left);

		       // this.getBoundingClientRect().top = 20;
		        // this.style.left = leftx;
		        // sy = parseInt($().style.top);
          //       leftx = cx - sx;
          //       lefty = cy - sy;

		    }).bind("touchmove",function(e){
		    	console.log(move);
		    	if(istouch && !move){
		    		console.log("sb");
		    		return ;
		    	}
		    	
		    	 var ev = e || window.event;
		    	 x = ev.clientX || ev.changedTouches[0].clientX;
		    	 left = x - leftx;
		    	 if(left <= -100) left = -100 + 0.5*left;
		    	 sx = this.getBoundingClientRect().left;
		    	 console.log(left);
		    	 if(left <= 0 && move)
		    	 {
		    	 	  this.style.left = left + "px";
		    	 	  // timer = setInterval(function(){
			        //   this.style.left = -1 + "px";
			        // },10);
		    	 }  
		    }).bind("touchend",function(e){
		    	var ev = e || window.event;
		    	//var x = ev.clientX || ev.changedTouches[0].clientX;
		    	// istouch = true;
		    	if(istouch && !move){
		    		return ;
		    	}
		    	// move = false;
		    	if(0>=left && left>= -29 && move){
		    		 timer = setInterval(function(){
		    		  left = left + 1;
			          test.style.left = left + "px";
			          console.log(test.style.left);

			          console.log(left+"--"+sx);
			          if(left >= 0 ){
			          	clearInterval(timer);
			          }
			        },1);
		    	}
		    	else if(-29 >left && left>= -60 && move){
		    		istouch = true;
		    		timer = setInterval(function(){
		    		  left = left - 1;
			          test.style.left = left + "px";
			          console.log(test.style.left);

			          // console.log(left+"--"+sx);
			          if(left == -60 ){
			          	clearInterval(timer);
			          }
			        },1);
		    	}
		    	else if (left<-60 && move){
		    		istouch = true;
		    		timer = setInterval(function(){
		    		  // left = left + 1;
		    		  left = left > -60 ? -60 : left + 4;
			          test.style.left = left + "px";
			          console.log(test.style.left);

			          // console.log(left+"--"+sx);
			          // if(left>-60)left = -60;
			          if(left == -60 ){
			          	clearInterval(timer);
			          }
			        },1);
		    	}
		    	move = false;
		    });
		});
		$('.delete').on("click",function(){
				$(this).parent().remove();
				istouch = false;
			    move = false;
			});
	</script>

</body>
</html>